<template>
  <el-drawer
    :title="drawerTitle[drawerType]"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="clearDialog"
    custom-class="tag-drawer kpi-bussiness-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="150px" :rules="editFormRules" ref="editForm">
          <el-row>
            <el-col :span="24">
              <el-form-item label="业务修饰词名称" prop="businessName">
                <el-input placeholder="请输入维度名称" v-model="editForm.businessName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="业务口径" prop="description">
                <el-input
                  type="textarea"
                  placeholder="请输入业务口径"
                  v-model="editForm.description"
                  :rows="5"
                  resize="none"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="clearDialog">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      drawerType: 'add',
      drawerTitle: {
        add: '新增业务修饰词',
        edit: '修改业务修饰词'
      },
      editForm: {
        tagId: '',
        businessName: '',
        description: ''
      },
      oldMenuIds: [],
      editFormRules: {
        businessName: [{ required: true, message: '业务修饰词名称不能为空', trigger: 'blur' }],
        description: [{ max: 500, message: '业务口径不能超过500个字符', trigger: 'blur' }]
      }
    }
  },
  methods: {
    showDrawer(data) {
      this.editForm.tagId = data.tagId || ''
      this.editForm.businessName = data.businessName
      this.editForm.description = data.description
      this.drawerVisible = true
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          let config = {
            businessName: this.editForm.businessName,
            description: this.editForm.description
          }
          this.$emit('confirm', config)
        }
      })
    },
    clearDialog() {
      this.editForm.tagId = ''
      this.editForm.businessName = ''
      this.editForm.description = ''
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
        this.drawerVisible = false
      })
    }
  }
}
</script>

<style lang="scss">
.kpi-bussiness-drawer {
}
</style>
